<template>
<div class='bot_nav_outer_box'>
<ul class='bot_nav_box'>
      <li>
        <router-link to="/home">
          <van-icon name="wap-home" /><br>
          首页
        </router-link>
      </li>
      
      <li>
        
        <router-link to="/classfy"><van-icon name="label" /><br>分类页</router-link>
      </li>
      
      <li>
        
        <router-link to="/jx"><van-icon name="gem" /><br>惊喜</router-link>
      </li>
      
      <li>
        
        <router-link to="/cart"><van-icon name="cart-circle" /><br>购物车</router-link>
      </li>
      
      <li>
        
        <router-link v-if='isLogin' to="/user"><van-icon name="manager" /><br>我的</router-link>
        <router-link v-else to="/login"><van-icon name="manager" /><br>未登录</router-link>
        </li>
    </ul>
</div>
    
</template>
<script>
// @ is an alias to /src
export default {
    name: 'XXX',
    data() {
        return {
        
        }
    },
    computed: {
      userName(){
        return this.$store.state.userInfo.phone ? '我的' : '未登录'
      },
      isLogin(){
        return this.$store.state.userInfo.phone ? true : false
      }
    },
    components: {
        
    }
}
</script>
<style lang="less">
.bot_nav_outer_box{
  height:50px
}
  .bot_nav_box{
    display: flex;
    position: fixed;
    bottom:0;
    left: 0;
    width: 100%;
    height: 50px;
    padding: 10px 0;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-around;
    background: #fff;
    box-shadow:0px -1px 4px 2px #ccc
    li{
      flex:1;
      a{
        font-size: 18px;
        display: block;
        &.router-link-active{
          color:red
        }
      }
    }
  }
</style>